@page
@{ Layout = "_Layout"; }

<el-alert type="error">此操作将为以下 <strong> {{ users.length }} </strong> 名成员 {{ form.isCancel ? '取消用户组' : '设置用户组' }}，确定吗？</el-alert>

<el-table
  :data="users"
  style="width: 100%;"
  size="small"
  row-key="id"
  stripe>
  <el-table-column
    label="头像" width="100">
    <template slot-scope="scope">
      <el-link :underline="false" v-on:click="btnViewClick(scope.row)">
        <el-badge v-if="!scope.row.checked" style="margin-top: 10px;" value="待审核">
          <el-avatar :size="40" :src="scope.row.avatarUrl || utils.getAssetsUrl('images/default_avatar.png')"></el-avatar>
        </el-badge>
        <el-badge v-else-if="scope.row.locked" style="margin-top: 10px;" value="锁定">
          <el-avatar :size="40" :src="scope.row.avatarUrl || utils.getAssetsUrl('images/default_avatar.png')"></el-avatar>
        </el-badge>
        <el-avatar v-else :size="40" :src="scope.row.avatarUrl || utils.getAssetsUrl('images/default_avatar.png')"></el-avatar>
      </el-link>
    </template>
  </el-table-column>
  <el-table-column
    label="账号">
    <template slot-scope="scope">
      <el-link :underline="false" type="primary" v-on:click="btnViewClick(scope.row)">{{scope.row.userName}}</el-link>
    </template>
  </el-table-column>
  <el-table-column
    prop="departmentName"
    label="部门">
  </el-table-column>
  <el-table-column
    prop="displayName"
    label="姓名">
  </el-table-column>
  <el-table-column label="手机" width="120">
    <template slot-scope="scope">
      <div v-if="scope.row.mobile">
        {{ scope.row.mobile }}
        <el-tag v-if="scope.row.mobileVerified">已验证</el-tag>
        <el-tag v-else type="warning">待验证</el-tag>
      </div>
    </template>
  </el-table-column>
</el-table>

<el-divider></el-divider>
<div style="height: 10px"></div>

<el-form v-on:submit.native.prevent v-if="isAddForm" size="small" ref="addForm" :model="addForm" label-width="120px">
  <el-form-item label="用户组名称" prop="groupName" :rules="{ required: true, message: '请输入用户组名称' }">
    <el-input v-model="addForm.groupName" placeholder="请输入用户组名称"></el-input>
  </el-form-item>
  <el-form-item label="用户组说明" prop="description">
    <el-input type="textarea" v-model="addForm.description" placeholder="请输入用户组说明"></el-input>
  </el-form-item>
</el-form>
<el-form v-on:submit.native.prevent v-else size="small" ref="form" :model="form" label-width="120px">
  <el-form-item label="操作">
    <el-radio-group v-model="form.isCancel">
      <el-radio-button :label="false">设置用户组</el-radio-button>
      <el-radio-button :label="true">取消用户组</el-radio-button>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="用户组">
    <el-checkbox-group v-if="groups && groups.length > 0" v-model="form.groupIds">
      <el-checkbox v-for="group in groups" :key="group.id" :label="group.id" :value="group.id" name="groupIds">
        {{ group.groupName }}
      </el-checkbox>
    </el-checkbox-group>
    <el-button size="mini" icon="el-icon-circle-plus-outline" v-on:click="isAddForm = true">
      新增用户组
    </el-button>
  </el-form-item>
</el-form>

<el-divider></el-divider>
<el-row align="right" style="margin-right: 5px; margin-top: 10px;">
  <el-col :span="24" align="right">
    <el-button size="small" type="primary" v-on:click="btnSubmitClick">确 定</el-button>
    <el-button size="small" v-on:click="btnCancelClick">取 消</el-button>
  </el-col>
</el-row>

@section Scripts{
  <script src="/sitefiles/assets/js/admin/settings/usersLayerGroups.js" type="text/javascript"></script>
}